<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link rel="stylesheet" type="text/css" href="../static/css/jquery.mobile-1.4.5.min.css">
<script type="text/javascript" src="../static/js/jquery-2.0.0.min.js"></script>
<script type="text/javascript" src="../static/js/jquery.mobile-1.4.5.min.js"></script>
<script type="text/javascript" src="../static/js/myinit.js"></script>
<script type="text/javascript" src="../static/js/cook_shop_cart.js"></script>	


<title>聊天列表</title>
</head>

<body>



<div data-role="page" id="chat">
	<div data-role="header"><a class="ui-btn ui-btn-b ui-btn-corner-all">客服登出</a><h1>正在聊天列表</h1></div>
	<div role="main" class="ui-content">
		<div data-role="listview" id="chatlist">
			 
		</div>
	</div>
</div>
 


<div data-role="page" id="chatitem" style="background-color:#dcdcdc">
	<div data-role="header"><a data-rel="back" class="ui-btn ui-btn-b ui-btn-corner-all">返回</a><h1 id="chatitem_title"></h1></div>
	
	<div class="ui-content" role="main" style="margin:0px;padding:0px;">
		<div id="chatitemlist" >
		
			
		
		</div>
	</div>
	
	<div data-role="footer" data-position="fixed" >
		<div style="position:relative;height:50px;text-align:center">
			<div style="display:inline-block;width:80%" id="context_body">
				<input type="text" id="context" placeholder=""/>
			</div>
			
			<img src="../static/img/fasong.png" style="position: absolute; top: 12px; right: 3px;" height="auto" width="30px" id="sendit">
		</div>
	</div>


</div>

<script type="text/javascript">
	var id= getUrldata('KFID');
 
//同步
	ajaxSettingsasync(false);
	
	
	var openid_chat='';
	var name_chat = '';
	var img_chat = '';
	var maxmsgid=0;
	
	var kfimg='';
	
	 
	
	
 
	
	
	
	
	function initmyself(){
		var url = '/webserver/api/v1/servicer/?format=json&id='+id;
		$.getJSON(url,function(rs){
			var objects=rs.objects;
			if(objects.length!=0){
				kfimg=objects[0].headimg;
			}
		});
	}
	initmyself();
	
	
	var timerefreshlist;
	$(document).on('pageshow','#chat',function(){
		$('#chatlist').empty();
		timerefreshlist=setInterval('initlist()',3000);
		
		 
	});
	//未读
	function weidu(chatname){
		var url = '/chat/servergetmsg/';
		var aa={};
		aa.chatname = chatname;
		aa.maxid=0;
		dopost(url,aa,function(rs){
		
		});
		
		
	}
	$(document).on('pagebeforehide','#chat',function(){
		clearInterval(timerefreshlist);
		 
	});
	
	 
	function initlist(){
		
		var url = '/webserver/api/v1/roomsta/?format=json&roomsts=1&receiver='+id;
		$.getJSON(url,function(rs){
			var objects=rs.objects;
			
			$.each(objects,function(index,item){
				var openid = item.sender;
				weidu(item.roomname);
				
				var len =$('#chatlist').find('#'+item.id).length;
				if(len==0){
					var info = getweixininfo(openid);
					var name = info.nickname;
					var img = info.headimgurl;
					$('#chatlist').append('<li id="'+item.id+'"><a ><img src="'+img+'"/>'+name+'</a></li>');
					$('#chatlist #'+item.id).click(function(e) {
						openid_chat=openid;
						name_chat=name;
						img_chat=img;
						maxmsgid=0;
						$.mobile.changePage('#chatitem');
					});
				}
				
				
				$('#chatlist').listview('refresh');
				
			});
		});
		
	}
	
	function getweixininfo(openid){
		var aa={};
		$.post('/weixin/getCustinfo/',{"openid":openid},function(rs){
			aa=rs;
		},'json');
		return aa;
	}
	
	$(document).on('pageshow','#chatitem',function(){
		inititem();
		initmsg();
		var ww=$(document).innerWidth();
		$('#context_body').width(ww-80);
	});
	
	
	function inititem(){
		$('#chatitem_title').html(name_chat);
	}
	
	function initmsg(){
		var url = '/chat/getmsg/';
		var aa={};
		aa.chatname=openid_chat+";"+id;
		aa.maxid=maxmsgid;
		dopost(url,aa,function(rs){
			if(maxmsgid==0){
				$('#chatitemlist').empty();
			}
			var index=0;
			$.each(rs,function(msgid,msg){
				if(parseInt(msgid)>maxmsgid){
					maxmsgid=parseInt(msgid);
				}
				if(msg.sender==openid_chat){
					addright(msg.content,msg.msgtype);
				}else{
					addleft(msg.content,msg.msgtype);
				}
				index++;
			});
			if(index>0){
				var  innerHeight=$('#chatitemlist').height();
				$('html,body').animate({scrollTop: innerHeight}, 1000);
				
			}
			setTimeout('initmsg()',3000);
		});
	}
	



	function addleft(content,type){
		var str="";
		var int_type=parseInt(type);
		switch (int_type){
			//文字
			case 1:
				str=content;
			break;
			//图片
			case 2:
				str='<img src="'+content+'" width="200px" height="auto"/>';
			break;
			 
		}
		$('#chatitemlist').append('<div style="position:relative;margin:1em 1em;"><img src="'+kfimg+'" width="40px" height="40px" style="border-radius:50px;position:absolute;left:5px;"/><img  src="/static/img/chatqipaoleft.png" style="position:absolute;left:49px;top:10px"/><div style="margin-left:60px;background-color:white;border-radius:10px;padding:0.5em 1em;word-break:break-all;min-height:40px">'+str+'</div>');
	}
	
	function addright(content,type){
		var str=""; 
		var int_type=parseInt(type);
		switch (int_type){
			//文字
			case 1:
				str=content;
			break;
			//图片
			case 2:
				str='<img src="'+content+'" width="200px" height="auto"/>';
			break;
			case 3:
			break;
			case 4:
				str='<a target="_blank" href="http://www.tiantianhw.cn/admin/shop/order/'+content+'/">http://www.tiantianhw.cn/admin/shop/order/'+content+'/</a>';
			break;
			case 5:
				str='<a target="_blank" href="http://www.tiantianhw.cn/admin/shop/goods/'+content+'/">http://www.tiantianhw.cn/admin/shop/goods/'+content+'/</a>';
			break;
			 
		}
		$('#chatitemlist').append('<div style="position:relative;margin:1em 1em;"><img src="'+img_chat+'" width="40px" height="40px" style="border-radius:50px;position:absolute;right:5px;"/><img  src="/static/img/chatqipaoright.png" style="position:absolute;right:49px;top:10px"/><div style="margin-right:60px;background-color:white;border-radius:10px;padding:0.5em 1em;word-break:break-all;min-height:40px">'+str+'</div></div>');
	}
	
	
	$("#sendit").click(function(e) {
		textto();
	});
	
	
	 
	function textto(){
		 
		var context =$('#context').val();
		if (context==''){
			toast('发送内容不能为空');
			return;
		}
		
		
		var url = '/chat/postmsg/';
		
		
		
		
		 

		var aa={};
		aa.chatname=openid_chat+";"+id;
		aa.msgtype=1;
	
		aa.content=context;
		aa.sender=id;
		aa.receiver=openid_chat;
		dopost(url,aa,function(rs){
			$('#context').val('');
			 
			
			
		});
		
	}


</script>
</body>
</html>
